<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var can=document.getElementById("canvas");
    can.width=window.innerWidth;
    can.height=window.innerHeight;
    var canvas=can.getContext("2d");
    var balls=[];//存放小球
    //创建对象
    function ball(){
        this.x=null;
        this.y=null;
        this.color=null;
        this.r=null;
        this.angle=null;//小球偏移量
        this.anglex=null;
        this.angley=null;
        //初始状态的小球
        this.int=function(X,Y){
            this.x=X;
            this.y=Y;
            this.color=this.randomcolor();
            this.r=this.randomR(10,15);
            this.angle=Math.random()*(Math.PI*2);
            this.anglex=this.randomR(5,15)*Math.cos(this.angle);
            this.angley=this.randomR(5,15)*Math.sin(this.angle);

        }
        //随机颜色
        this.randomcolor=function(){
            return "#"+parseInt(Math.random()*(16777216)).toString(16);
        }
        //随机数字 可控制半径或xy移动量
        this.randomR=function(min,max){
            return Math.random()*max+min;
        }
        //小球的运动及偏移量
        this.move=function(){
            this.x+=this.anglex;
            this.y+=this.angley;
            this.r-=0.3;
            this.anglex*=0.9;
            this.angley*=0.9;
        }

    }

    //创建小球
    function createball(X,Y){
        var count=parseInt(Math.random()*30+10);
        for(var i=0;i<count;i++){
            var Ball=new ball();
            Ball.int(X,Y);
            balls.push(Ball);
        }
    }
    //在canvas上绘制小球
    function draw(){
        for(var i=0;i<balls.length;i++){
            var b=balls[i];
            b.move();
            canvas.beginPath();
            canvas.arc(b.x, b.y, b.r,0,Math.PI*2,true);
            canvas.fillStyle= b.color;
            canvas.fill();
            canvas.closePath();

        }
    }
    //移除小球
    function remove(){
        for(var i=0;i<balls.length;i++){
            var b=balls[i];
            if(b.r<0.3){
                balls.splice(i,1);
                i--;
            }
        }
    }
    //计时器
    time();
    function time(){
        canvas.clearRect(0,0,can.width,can.height);
        draw();
        remove();
        window.requestAnimationFrame(time);

    }
    can.onmouseup=function(e){
        var x1= e.pageX;
        var y1= e.pageY;
        createball(x1,y1);
    }


</script>
</body>
</html>
